<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理系统</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
        }

        #app {
            height: 100%;
        }

        .el-container {
            height: 100%;
        }

        .el-header {
            background-color: #409EFF;
            color: white;
            line-height: 60px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        }

        .el-aside {
            background-color: #545c64;
            color: white;
            height: 100%;
            overflow: hidden;
        }

        .el-main {
            padding: 0; /* 移除内边距以确保iframe可以完全填充 */
            background-color: #f5f7fa;
            height: calc(100% - 60px);
            overflow: hidden; /* 防止滚动条影响布局 */
            display: flex; /* 使用flex布局确保iframe填充 */
        }

        .el-footer {
            height: 60px;
            background-color: #f5f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 1px solid #e6e6e6;
        }

        .el-menu {
            border-right: none;
        }

        .el-menu-vertical-demo {
            height: 100%;
        }

        /* iframe容器样式 */
        .iframe-container {
            flex: 1; /* 填充剩余空间 */
            display: flex;
            padding: 0;
            margin: 0;
        }

        iframe {
            flex: 1; /* 填充容器 */
            width: 100%;
            height: 100%;
            border: none;
            background: white;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }

        .pagination-container {
            padding: 10px 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="header-content" style="display: flex; align-items: center;">
                <span>后台管理系统</span>
                <div style="display: flex; align-items: center; margin-left: auto;">
                    <span>管理员</span>
                    <span>&nbsp;</span>
                    <el-button type="danger" icon="el-icon-switch-button" circle></el-button>
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        @select="handleMenuSelect">
                    <el-menu-item index="1">
                        <i class="el-icon-user"></i>
                        <span slot="title">员工管理</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">车站管理</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-menu"></i>
                        <span slot="title">列车管理</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-menu"></i>
                        <span slot="title">车厢管理</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-document"></i>
                        <span slot="title">订单明细</span>
                    </el-menu-item>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>每日信息</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="6-1">每日班次</el-menu-item>
                            <el-menu-item index="6-2">选项2</el-menu-item>
                            <el-menu-item index="6-3">选项3</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <div class="iframe-container">
                        <iframe :src="activeUrl"></iframe>
                    </div>
                </el-main>
                <el-footer>

                </el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="js/request.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeIndex: '1',
                activeUrl: 'page/admin/list.html',
                menuList: [
                    { id: '1', name: '员工管理', url: 'page/admin/list.html' },
                    { id: '2', name: '车站管理', url: 'page/station/list.html' },
                    { id: '3', name: '列车管理', url: 'page/train/list.html' },
                    { id: '4', name: '车厢管理', url: 'page/coach/list.html' },
                    { id: '5', name: '订单明细', url: 'page/order/list.html' },
                    { id: '6-1', name: '每日班次', url: 'page/daily/dailyTrain.html'}
                ]
            }
        },
        methods: {
            handleMenuSelect(index) {
                const selectedMenu = this.menuList.find(item => item.id === index);
                if (selectedMenu) {
                    this.activeUrl = selectedMenu.url;
                }
            }
        }


    })
</script>
</html>